<template>
    <div class="plotArea" id="container">

    </div>
</template>

<script>
  import * as Three from 'three'

  export default {
    name: "three3D",
    components: {},
    data() {
      return {
        camera: null,
        scene: null,
        renderer: null,
        mesh: null
      }
    },
    methods: {
      init: function () {
        var container = document.getElementById('container')

        this.camera = new Three.PerspectiveCamera(70, container.clientWidth / container.clientHeight, 0.01, 10)
        this.camera.position.z = 1

        this.scene = new Three.Scene()

        var geometry = new Three.BoxGeometry(0.2, 0.2, 0.2)
        var material = new Three.MeshNormalMaterial()

        this.mesh = new Three.Mesh(geometry, material)
        this.scene.add(this.mesh)

        this.renderer = new Three.WebGLRenderer({ antialias: true })
        this.renderer.setSize(container.clientWidth, container.clientHeight)
        container.appendChild(this.renderer.domElement)
      },
      animate: function () {
        requestAnimationFrame(this.animate)
        this.mesh.rotation.x += 0.01
        this.mesh.rotation.y += 0.02
        this.renderer.render(this.scene, this.camera)
      }
    },
    mounted () {
      this.init()
      this.animate()
    }
  }
</script>

<style scoped lang="scss">

    .plotArea {
        flex: 1;
        width: 100%;
        height: 100%;
    }
</style>
